import React, { useMemo, useState } from 'react';
import { View, StyleSheet, Switch } from 'react-native';
import { Layout, UI, useThemeColors, Result } from '@gaozh1024/rn-toolkit';
import type { ResultStatus } from '@gaozh1024/rn-toolkit/lib/components/feedback/Result/Result';

const statusList: ResultStatus[] = ['success', 'error', 'warning', 'info', 'offline'];

const ResultTestScreen: React.FC = () => {
    const colors = useThemeColors();

    const styles = StyleSheet.create({
        section: { marginBottom: 16 },
        row: { flexDirection: 'row', alignItems: 'center', gap: 12, flexWrap: 'wrap' },
        col: { gap: 12 },
        card: { borderRadius: 12, borderWidth: 1, borderColor: colors.border },
        bordered: { borderWidth: 1, borderColor: colors.border, borderRadius: 8, padding: 12 },
    });

    // 行为与样式配置
    const [status, setStatus] = useState<ResultStatus>('success');
    const [align, setAlign] = useState<'center' | 'start'>('center');
    const [fullHeight, setFullHeight] = useState<boolean>(true);
    const [spacingStr, setSpacingStr] = useState<string>('8');

    // 文案
    const [title, setTitle] = useState<string>('操作成功');
    const [description, setDescription] = useState<string>('恭喜！你的任务已顺利完成。');

    // 额外内容开关
    const [useExtra, setUseExtra] = useState<boolean>(true);

    // 交互结果计数
    const [primaryCount, setPrimaryCount] = useState<number>(0);
    const [secondaryCount, setSecondaryCount] = useState<number>(0);

    const spacing = useMemo(() => {
        const v = parseInt(spacingStr);
        return Number.isFinite(v) ? v : 8;
    }, [spacingStr]);

    const extraContent = useMemo(() => (
        <View style={styles.bordered}>
            <UI.Text variant="caption" color="subtext" mb={8}>额外内容（extra）：</UI.Text>
            <UI.Text variant="body1" color="text">这里可以放置补充说明或操作引导。</UI.Text>
        </View>
    ), [colors.border]);

    return (
        <Layout.Page
            headerShown
            headerProps={{ title: 'Result 测试', backVisible: true }}
            padding={16}
            scrollable
            testID="ResultTestScreen"
        >
            {/* 行为与样式 */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>行为与样式</UI.Text>
                    <View style={styles.col}>
                        <UI.Text children={'标题（title）'} />
                        <UI.Input
                            value={title}
                            onChangeText={setTitle}
                            placeholder="操作成功"
                            testID="input-title"
                        />
                        <UI.Text children={'描述（description）'} />
                        <UI.Input
                            value={description}
                            onChangeText={setDescription}
                            placeholder="恭喜！你的任务已顺利完成。"
                            testID="input-description"
                        />
                        <UI.Text children={'间距（spacing，整数）'} />
                        <UI.Input
                            value={spacingStr}
                            onChangeText={setSpacingStr}
                            placeholder="8"
                            keyboardType="numeric"
                            testID="input-spacing"
                        />
                    </View>
                    <View style={[styles.row, { marginTop: 12 }]}>
                        {statusList.map(s => (
                            <UI.Button
                                key={s}
                                title={`状态：${s}`}
                                variant={status === s ? 'primary' : 'outline'}
                                onPress={() => setStatus(s)}
                                testID={`btn-status-${s}`}
                            />
                        ))}
                    </View>
                    <View style={[styles.row, { marginTop: 12 }]}>
                        <UI.Button
                            title="对齐：居中"
                            variant={align === 'center' ? 'primary' : 'outline'}
                            onPress={() => setAlign('center')}
                            testID="btn-align-center"
                        />
                        <UI.Button
                            title="对齐：起始"
                            variant={align === 'start' ? 'primary' : 'outline'}
                            onPress={() => setAlign('start')}
                            testID="btn-align-start"
                        />
                        <UI.Text variant="body2" color="textSecondary">占满高度（fullHeight）</UI.Text>
                        <Switch value={fullHeight} onValueChange={setFullHeight} testID="switch-fullHeight" />
                        <UI.Text variant="body2" color="textSecondary">使用额外内容（extra）</UI.Text>
                        <Switch value={useExtra} onValueChange={setUseExtra} testID="switch-extra" />
                    </View>
                </Layout.Card>
            </View>

            {/* 基础用法：优先显示 actions */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>基础用法（优先显示 actions）</UI.Text>
                    <Result
                        status={status}
                        title={title}
                        description={description}
                        actions={[
                            { text: '继续', type: 'primary', onPress: () => setPrimaryCount(n => n + 1) },
                            { text: '返回', type: 'secondary', onPress: () => setSecondaryCount(n => n + 1) },
                        ]}
                        extra={useExtra ? extraContent : undefined}
                        align={align}
                        spacing={spacing}
                        fullHeight={fullHeight}
                        testID="result-basic"
                    />
                    <View style={[styles.bordered, { marginTop: 12 }]}>
                        <UI.Text variant="body1" color="text" testID="text-primary-count">继续点击计数：{primaryCount}</UI.Text>
                        <UI.Text variant="body1" color="text" testID="text-secondary-count">返回点击计数：{secondaryCount}</UI.Text>
                    </View>
                </Layout.Card>
            </View>

            {/* 无 actions：展示 extra */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>无 actions（展示 extra）</UI.Text>
                    <Result
                        status={status}
                        title="离线状态"
                        description="当前设备似乎没有连接网络，请检查你的网络设置。"
                        extra={useExtra ? extraContent : undefined}
                        align={align}
                        spacing={spacing}
                        fullHeight={false}
                        style={{ paddingHorizontal: 12 }}
                        testID="result-no-actions"
                    />
                </Layout.Card>
            </View>

            {/* 样式覆盖：对齐起始 + 自定义容器样式 */}
            <View style={styles.section}>
                <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
                    <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>样式覆盖（align='start' + style）</UI.Text>
                    <Result
                        status="info"
                        title="提示信息"
                        description="你可以通过 style 覆盖容器样式。"
                        align="start"
                        spacing={spacing}
                        fullHeight={false}
                        style={{ paddingHorizontal: 12 }}
                        testID="result-style-override"
                    />
                </Layout.Card>
            </View>
        </Layout.Page>
    );
};

export default ResultTestScreen;